<template>
  <div class="approval-container">
    <!-- 进度步骤条，显示审批流程状态 -->
    <el-steps
      style="max-width: 1200px; margin: 0 auto;" 
      :active="2"
      align-center 
    >
      <el-step
        title="阶段一"
        description="提交申请已成功"
        :status="statusMap[0]" 
        aria-label="第一步：提交申请已完成"
      />
      <el-step
        title="阶段二"
        description="乡级干部已审批"
        :status="statusMap[1]"
        aria-label="第二步：乡级审批已完成"
      />
      <el-step
        title="阶段三"
        description="市县级干部已审批"
        :status="statusMap[2]"
        aria-label="第三步：市县级审批进行中"
      />
      <el-step
        title="阶段四"
        description="省级干部已审批"
        :status="statusMap[3]"
        aria-label="第四步：省级审批待进行"
      />
    </el-steps>

    <!-- 嵌入的外部网站内容 -->
    <div class="iframe-wrapper">
      <iframe 
        src="https://www.gov.cn/" 
        width="100%" 
        height="600px" 
        class="embedded-iframe"
        title="嵌入的内容来自慕益"
        sandbox="allow-same-origin allow-scripts allow-popups allow-forms" 
        referrerpolicy="no-referrer-when-downgrade"
      ></iframe>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ApprovalSteps', // 给组件起个名字，便于调试
  data() {
    return {
      // 根据当前active值确定每个步骤的状态
      // 0: 'wait', 1: 'process', 2: 'finish', 3: 'error'
      statusMap: ['finish', 'finish', 'process', 'wait'] // 对应active=2时的状态
    };
  }
};
</script>

<style lang="less" scoped>
.approval-container {
  padding: 20px;
  max-width: 1400px; /* 稍微比 iframe 最大宽度大一点，提供整体外边距 */
  margin: 0 auto;
  box-sizing: border-box;
}

.el-steps {
  margin-bottom:50px; 
}

.el-step__title {
  font-weight: 500; /* 加粗标题 */
}

.el-step__description {
  font-size: 14px;
}

.iframe-wrapper {
  margin-top: 30px; 
  max-width: 100%; 
  width:1800px;
  margin: 0 auto; /* 让 wrapper 居中 */
  box-sizing: border-box;

}

.embedded-iframe {
  width: 100%; 
  height: 100%; 
  border: none; 
  background-color: #fff;
  min-height: 500px; 

  height: 600px; 
}

@media (max-width: 768px) {
  .el-steps--horizontal {
    overflow-x: auto; /* 允许横向滚动 */
    padding-bottom: 10px; /* 防止内容被遮挡 */
  }
  .embedded-iframe {
    height: 400px;
    width: 400px;
  }
}
</style>
